<template>
  <div class="container" ref="mainCon">
    <topTitle
      :titleText="titleText"
      :btnText="btnText"
      :isShowBtn="isShowBtn"
      :pathUrl="pathUrl"
      :oldUrl="oldUrl"
    ></topTitle>
    <div class="mainCon">
      <el-row class="toolbar searchInputWidth" style="padding-bottom: 0">
        <el-form :inline="true" :model="filterField" ref="searchConditions">
          <el-col :lg="8" :xl="6">
            <el-form-item
              label="监管区域"
              class="row-padding-bottom"
              v-if="isCzUser()"
            >
              <el-cascader
                v-model="areaId"
                :options="czAreasOptions"
                @change="getAreaId"
                clearable
                filterable
                placeholder="请选择"
                :props="{ checkStrictly: true }"
                :append-to-body="false"
              ></el-cascader>
            </el-form-item>
            <el-form-item label="监管区域" class="row-padding-bottom" v-else>
              <el-cascader
                v-model="areaId"
                :options="areasOptions"
                @change="getAreaId"
                clearable
                filterable
                placeholder="请选择"
                :props="{ checkStrictly: true }"
                :append-to-body="false"
              ></el-cascader>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :xl="6">
            <el-form-item label="行业" class="row-padding-bottom">
              <el-select
                class="selectWidth"
                v-model="filterField.industryId"
                filterable
                placeholder="请选择"
                clearable
                :popper-append-to-body="false"
              >
                <el-option
                  v-for="item in industryOptions"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <template v-if="advanced">
            <el-col :lg="8" :xl="6">
              <el-form-item label="事项程度" class="row-padding-bottom">
                <el-select
                  v-model="filterField.disputeRank"
                  filterable
                  placeholder="请选择"
                  clearable
                  :popper-append-to-body="false"
                >
                  <el-option
                    v-for="item in rankOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <!-- <el-col :lg="8" :xl="6">
          <el-form-item label="企业名称" class="row-padding-bottom">
            <el-input v-model="filterField.companyName" clearable placeholder="请输入企业名称或统一社会信用代码"></el-input>
          </el-form-item>
           </el-col> -->
            <el-col :lg="8" :xl="6">
              <el-form-item label="主体名称" class="row-padding-bottom">
                <el-input
                  v-model="filterField.companyName"
                  clearable
                  placeholder="请输入单位名称或个人姓名"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item label="项目名称" class="row-padding-bottom">
                <el-input
                  v-model="filterField.projectName"
                  clearable
                  placeholder="请输入项目名称"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item label="事项类别" class="row-padding-bottom">
                <el-select
                  class="selectWidth"
                  v-model="filterField.preciseTypeId"
                  filterable
                  placeholder="请选择"
                  clearable
                >
                  <el-option
                    v-for="item in accidentTypeList"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <!-- keyWords -->
            <el-col :lg="8" :xl="6">
              <el-form-item label="施工方名称" class="row-padding-bottom">
                <el-input
                  v-model="filterField.keyWords"
                  clearable
                  placeholder="请输入施工方名称"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item label="事项时间" class="row-padding-bottom">
                <timeSelection
                  @getStartTimeValue="getStartTimeValue"
                  @getEndTimeValue="getEndTimeValue"
                ></timeSelection>
              </el-form-item>
            </el-col>
          </template>
          <el-col :lg="8" :xl="6">
            <el-form-item label="">
              <a
                @click="toggleAdvanced"
                style="margin-left: 40px; color: #409eff; cursor: pointer"
                class="btnColor"
              >
                {{ advanced ? '收起' : '展开' }}
                <i
                  :class="advanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
                ></i>
              </a>
              <el-button
                type="primary"
                icon="icon iconfont iconchazhao1"
                @click="searchList"
                class="searchBtn"
              >
                <span>搜索</span>
              </el-button>
              <!-- <el-button class="commonBut saveBtn funComBut" icon="icon iconfont icondaochu" @click="exportExcel">
                  <span class="opetareText">导出</span>
                </el-button> -->
            </el-form-item>
            <el-form-item>
              <exportBtn
                :dataLen="tableList.length"
                :filterField="filterField"
                api="api-s/report/export_JC_CS_RIGHTS_DISPUTE"
                style="margin-top: 0px"
              ></exportBtn>
            </el-form-item>
          </el-col>
          <!-- <el-form-item>
            <el-button type="primary" icon="icon iconfont iconchazhao1" @click="searchList" class="commonBtn"></el-button>
          </el-form-item> -->
        </el-form>
      </el-row>
      <div class="spacing"></div>
      <div
        ref="tableBox"
        :class="hiddleToolBar ? 'tableBoxCur tableBox' : 'tableBoxCur'"
      >
        <el-table
          ref="tableBox1"
          :max-height="tableHeight"
          @sort-change="sortChange"
          :data="tableList"
          v-loading="loading"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          highlight-current-row
          stripe
          style="border: 1px solid #dfe6ec"
        >
          <el-table-column prop="projectName" label="项目名称" width="230">
            <template slot-scope="scope">
              <copyText
                :tableIndex="scope.$index"
                :copyTextName="scope.row.projectName"
                :columnName="'projectName'"
              ></copyText>
            </template>
          </el-table-column>
          <el-table-column
            prop="pbName"
            label="施工方名称"
            width="230"
            :formatter="formatTd"
          >
            <template slot-scope="scope">
              <copyText
                :tableIndex="scope.$index"
                :copyTextName="scope.row.pbName"
                :columnName="'pbName'"
              ></copyText>
            </template>
          </el-table-column>
          <el-table-column
            prop="pbUscc"
            label="施工方统一社会信用代码"
            align="center"
            :formatter="formatTd"
            min-width="200"
          ></el-table-column>
          <el-table-column prop="companyName" label="责任主体名称" width="230">
            <template slot-scope="scope">
              <copyText
                :tableIndex="scope.$index"
                :copyTextName="scope.row.companyName"
                :columnName="'companyName'"
              ></copyText>
            </template>
          </el-table-column>
          <el-table-column
            prop="uscc"
            label="责任主体证件号码"
            align="center"
            :formatter="formatTd"
            min-width="200"
          ></el-table-column>
          <el-table-column
            prop="preciseTypeName"
            label="事项类别"
            :formatter="formatTd"
            width="230"
          >
            <template slot-scope="scope">
              <copyText
                :tableIndex="scope.$index"
                :copyTextName="scope.row.preciseTypeName"
                :columnName="'preciseTypeName'"
              ></copyText>
            </template>
          </el-table-column>
          <el-table-column
            prop="disputeDate"
            label="事项时间"
            align="center"
            sortable="custom"
            min-width="180"
          ></el-table-column>
          <el-table-column
            prop="address"
            label="事项发生地区"
            align="center"
            :formatter="formatTd"
            min-width="200"
          ></el-table-column>
          <el-table-column
            prop="disputeRankDesc"
            label="事项程度"
            align="center"
            :formatter="formatTd"
            min-width="120"
          ></el-table-column>
          <el-table-column
            prop="balance"
            label="涉及金额（元）"
            sortable="custom"
            align="center"
            :formatter="formatTd"
            min-width="160"
          ></el-table-column>
          <el-table-column
            prop="peopleTotal"
            label="涉及人数（人）"
            sortable="custom"
            align="center"
            :formatter="formatTd"
            min-width="160"
          ></el-table-column>
          <el-table-column
            prop="result"
            label="处理结果"
            :formatter="formatTd"
            width="230"
          >
            <template slot-scope="scope">
              <copyText
                :tableIndex="scope.$index"
                :copyTextName="scope.row.result"
                :columnName="'result'"
              ></copyText>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="left"
            :formatter="formatTd"
            fixed="right"
            width="180"
          >
            <template slot-scope="scope">
              <el-link
                type="primary"
                v-hasBtn="'superviseEvent:detail'"
                @click="toDetail(scope.$index, scope.row)"
                >查看</el-link
              >
              <el-link
                type="primary"
                @click="toEdit(scope.$index, scope.row)"
                v-hasBtn="'superviseEvent:update'"
                v-if="scope.row.show == '1'"
                >编辑</el-link
              >
              <el-popover
                placement="top"
                width="200"
                :ref="`popover-${scope.$index}`"
              >
                <p style="line-height: 40px">
                  <i class="el-icon-info" style="color: rgb(255, 153, 0)"></i>
                  确认删除此违法记载吗？
                </p>
                <div style="text-align: right; margin: 0">
                  <el-button
                    size="mini"
                    type="text"
                    @click="
                      scope._self.$refs[`popover-${scope.$index}`].doClose()
                    "
                    >取消</el-button
                  >
                  <el-button type="primary" size="mini" @click="toDel(scope)"
                    >确定</el-button
                  >
                </div>
                <el-link
                  slot="reference"
                  type="primary"
                  v-hasBtn="'superviseEvent:delete'"
                  v-if="scope.row.show == '1'"
                  >删除</el-link
                >
              </el-popover>
              <!-- <span v-show="!isShowDetail && !isShowUpdate">--</span> -->
            </template>
          </el-table-column>
          <!-- 表格数据为空时，页面显示 -->
          <div slot="empty" v-show="isShow">
            <emptyTable emptyText="暂无相关违法记载数据"></emptyTable>
          </div>
        </el-table>
        <!-- filterField为搜索条件 -->
        <!-- getTableList为获取子组件的数据 -->
        <Pagination
          ref="pagination"
          @getpageSize="getpageSize"
          @getpageNo="getpageNo"
          @getList="getTableList"
          :filterField="filterField"
          :requestUrl="requestUrl"
        ></Pagination>
      </div>
      <!-- <el-dialog
          title="提示"
          :visible.sync="delDialogVisible"
          width="30%"
          center
          :close-on-press-escape="false"
          :close-on-click-modal="false"
      >
          <span
              >请确认是否删除该条信息？</span
          >
          <span slot="footer" class="dialog-footer">
              <el-button class="btn cancel" @click="delDialogVisible = false"
                  >取 消</el-button
              >
              <el-button type="primary" class="btn save" @click="delIpAddress()"
                  >确 定</el-button
              >
          </span>
      </el-dialog> -->
    </div>
  </div>
</template>
<script>
import scrollTable from '@/mixin/scrollTable.js'
import { mapState, mapActions } from 'vuex'
export default {
  name: 'superviseEvent',
  mixins: [scrollTable],
  data() {
    return {
      titleText: '违法记载',
      btnText: '添加违法记载',
      advanced: false,
      pathUrl: '/home/events/addSuperviseEvent',
      oldUrl: '/home/events/superviseEvent',
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        },
      },
      rankOptions: [], //事项程度
      //表格数据
      tableList: [],
      requestUrl: 'api-r/rightsdispute/expand/listbypage',
      date: [],
      areaId: '',
      accidentTypeList: [], //事项下拉
      //搜索条件
      filterField: {
        areaId: '', //监管区域
        industryId: '', //行业
        disputeRank: '', //事项程度
        companyName: '', //企业名称
        projectName: '',
        preciseTypeId: '', //事项类别
        keyWords: '',
        startDate: '',
        endDate: '',
      },
      pageSize: 20,
      pageNo: 1,
      isShow: false, //列表加载
      loading: true,
      // isQy: false,
      active: -1,
      isShowBtn: '',
      czAreasOptions: [], //滁州区域
      // isShowUpdate:"",
      // isShowDetail: ""
    }
  },
  computed: { ...mapState(['areasOptions', 'industryOptions']) },
  created() {
    this.filterField.disputeRank = this.$route.query.disputeRank || ''
    // this.isQy = localStorage.getItem("loginType") == "QY" ? true : false;
    this.getRank() //事项程度
    this.getIndustry({})
    if (this.isCzUser()) {
      this.getCzArea()
    } else {
      this.getAreas({ areaId: this.$store.state.areaInfoArr.areaId })
    }
    this.isShowBtn =
      this.$store.state.buttonLimitsArr.indexOf('superviseEvent:add') > -1
    // this.isShowUpdate = this.$store.state.buttonLimitsArr.indexOf('superviseEvent:update') > -1;
    // this.isShowDetail = this.$store.state.buttonLimitsArr.indexOf('superviseEvent:detail') > -1;
  },
  async mounted() {
    await this.getSelecData('DISPUTE_TYPE')
    const { preciseTypeId } = this.$route.query || ''
    this.filterField.preciseTypeId = preciseTypeId
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData()
    })
  },
  activated() {
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData(this.pageNo, this.pageSize)
    })
  },
  methods: {
    getStartTimeValue(val) {
      if (val) {
        this.filterField.startDate = val
      } else {
        this.filterField.startDate = ''
      }
    },
    getEndTimeValue(val) {
      if (val) {
        this.filterField.endDate = val
      } else {
        this.filterField.endDate = ''
      }
    },
    toggleAdvanced() {
      this.advanced = !this.advanced
    },
    getpageSize(val) {
      this.pageSize = val
    },
    getpageNo(val) {
      this.pageNo = val
    },
    ...mapActions(['getAreas', 'getIndustry']),
    /* getSelecData(type) {
      var url = "api-bs/base/dicitem/findbytype";
      this.axios({
        method: "post",
        url: url,
        data: { type: type }
      })
        .then(res => {
          if (type == "INDUSTRY") {
            this.industry = res.data.result;
          }
        })
        .catch(error => {
          this.$message({
            showClose: true,
            duration: 3000,
            message: "获取数据失败",
            type: "error"
          });
        });
    }, */
    //行业
    getIndustryId() {
      this.filterField.industryId =
        this.filterField.industryId[this.filterField.industryId.length - 1]
    },

    //获取选中的区域最后一级id
    getAreaId() {
      var areaId = this.areaId[this.areaId.length - 1]
      this.filterField.areaId = areaId
    },

    getTableList(data) {
      this.tableList = data
      this.loading = false
      if (this.tableList.length < 1) {
        this.isShow = true
      }
    },
    getRank() {
      this.axios({
        method: 'post',
        url: 'api-r/rightsdispute/expand/getRank',
        data: {},
      })
        .then((response) => {
          this.rankOptions = response.data.result
        })
        .catch((error) => {
          this.$message({
            showClose: true,
            duration: 3000,
            message: '获取事项程度数据失败',
            type: 'error',
          })
        })
    },
    // 搜索
    searchList() {
      if (this.date) {
        this.filterField.applyStartDate = this.date[0]
        this.filterField.applyEndDate = this.date[1]
      } else {
        this.filterField.applyStartDate = ''
        this.filterField.applyEndDate = ''
      }
      this.$refs.pagination.getTableListData()
    },

    toDetail(index, row) {
      this.$router.push({
        path: '/home/events/detailSuperviseEvent',
        name: 'detailSuperviseEvent',
        query: {
          id: row.id,
        },
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/events/superviseEvent',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    toEdit(index, row) {
      this.$router.push({
        path: '/home/events/editSuperviseEvent',
        name: 'editSuperviseEvent',
        query: {
          id: row.id,
        },
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/events/superviseEvent',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    toAdd() {
      this.$router.push('/home/events/addSuperviseEvent')
    },

    dateForma: function (row, column) {
      var date = row[column.applyDate]
      if (date == undefined) {
        return '--'
      }
      return moment(date).format('YYYY-MM-DD HH:mm:ss')
    },
    /**
     * @description: 事项类别下拉
     * @param {*} type
     * @return {*}
     */
    getSelecData(type) {
      return this.axios({
        method: 'post',
        url: 'api-bs/base/dicitem/findbytype',
        data: { type },
      })
        .then((res) => {
          if (type == 'DISPUTE_TYPE') {
            this.accidentTypeList = res.data.result
          }
        })
        .catch((error) => {
          this.$message({
            showClose: true,
            duration: 3000,
            message: '获取数据失败',
            type: 'error',
          })
        })
    },
    /**
     * @description: 删除
     * @param {*} scope
     * @return {*}
     */
    toDel(scope) {
      scope._self.$refs[`popover-${scope.$index}`].doClose()
      const { id } = scope.row
      return this.axios({
        method: 'post',
        url: 'api-r/rightsdispute/expand/delete',
        params: {
          id,
        },
      })
        .then((response) => {
          if (!response.data.hasError) {
            this.$message.success('删除成功')
            this.$refs.pagination.getTableListData(this.pageNo, this.pageSize)
          } else {
            this.$message.error(response.data.errorMsg)
          }
        })
        .catch((error) => {
          if (error.response) {
            this.$message.error(error.response.data)
          }
        })
    },
    getCzArea() {
      this.axios({
        method: 'post',
        url: 'api-bs/areadic/base/detailBySeverAreaId',
      })
        .then((response) => {
          this.czAreasOptions = response.data.result
        })
        .catch((error) => {
          this.$message({
            showClose: true,
            duration: 3000,
            message: '获取数据失败',
            type: 'error',
          })
        })
    },
  },
}
</script>

<style scoped lang="less">
.saveBtn {
  margin-right: 24px;
  margin-top: 15.5px;
}

.mainCon {
  top: 198px;
}

.nav ul {
  list-style: none;
}

.nav li {
  display: block;
  float: left;
}
@import '../../../static/css/filterArea.less';
</style>
